<template>
  <view class="service-detail-container">
    <!-- 服务图片 -->
    <service-images 
      :images="serviceDetail.images" 
      :loading="loading" 
    />
    
    <!-- 服务基本信息 -->
    <service-info 
      :service-info="{
        id: serviceDetail.id,
        name: serviceDetail.name,
        price: serviceDetail.price,
        originalPrice: serviceDetail.originalPrice,
        discount: serviceDetail.discount,
        tag: serviceDetail.tag,
        sales: serviceDetail.sales,
        rating: serviceDetail.rating
      }" 
    />
    
    <!-- 选项区 -->
    <view class="service-detail-container__options-panel">
      <!-- 服务规格选择 -->
      <view class="service-detail-container__option-item" @click="showOptionsPopup">
        <view class="service-detail-container__option-left">
          <text class="service-detail-container__option-label">规格</text>
          <text 
            class="service-detail-container__option-value" 
            :class="{'service-detail-container__option-placeholder': !selectedOption}"
          >
            {{ selectedOption ? selectedOption.name : '请选择' }}
          </text>
        </view>
        <view class="service-detail-container__option-right">
          <view class="service-detail-container__option-icon">
            <text class="service-detail-container__option-arrow">›</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 时间选择 -->
    <service-time-selector 
      :selected-time="selectedTime" 
      @time-select="onTimeSelect" 
    />
    
    <!-- 服务描述 -->
    <service-description 
      :description="serviceDetail.description" 
      :notices="serviceDetail.notices" 
    />
    
    <!-- 服务评价 -->
    <view class="service-section">
      <view class="service-section-title">
        <text class="service-section-title-text">用户评价</text>
      </view>
      <service-reviews 
        :reviews="serviceDetail.reviews" 
        :limit="2" 
        :show-view-all="true"
        @view-all="goToReviews"
      />
    </view>
    
    <!-- 底部操作栏 -->
    <service-footer 
      :disabled="!selectedOption || !selectedTime" 
      button-text="立即预约" 
      @action-click="handleFooterAction" 
      @button-click="buyNow"
    />
    
    <!-- 服务规格选择弹窗 -->
    <custom-popup 
      :show="showOptions" 
      title="选择服务规格" 
      @close="closeOptionsPopup"
      @confirm="confirmOption"
    >
      <service-options 
        :options="serviceDetail.options" 
        :selected-index="selectedOptionIndex" 
        @select="selectOption"
      />
    </custom-popup>
  </view>
</template>

<script setup>
import { ref, reactive, computed, defineProps, defineEmits } from 'vue';
import ServiceImages from './ServiceImages.vue';
import ServiceInfo from './ServiceInfo.vue';
import ServiceTimeSelector from './ServiceTimeSelector.vue';
import ServiceDescription from './ServiceDescription.vue';
import ServiceReviews from './ServiceReviews.vue';
import ServiceOptions from './ServiceOptions.vue';
import ServiceFooter from './ServiceFooter.vue';
import CustomPopup from '../common/CustomPopup.vue';

const props = defineProps({
  /**
   * 服务详情数据
   */
  serviceDetail: {
    type: Object,
    default: () => ({
      id: 0,
      name: '加载中...',
      price: 0,
      images: [],
      description: '',
      notices: [],
      options: [],
      reviews: []
    })
  },
  /**
   * 是否加载中
   */
  loading: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits([
  'buy-now', 
  'go-to-reviews', 
  'go-to-home', 
  'go-to-provider', 
  'contact-service'
]);

// 选中的选项
const selectedOptionIndex = ref(-1);
const selectedOption = computed(() => {
  if (selectedOptionIndex.value >= 0 && props.serviceDetail.options) {
    return props.serviceDetail.options[selectedOptionIndex.value];
  }
  return null;
});

// 选中的时间
const selectedTime = ref('');

// 弹窗控制状态
const showOptions = ref(false);

// 显示选项弹窗
const showOptionsPopup = () => {
  showOptions.value = true;
};

// 关闭选项弹窗
const closeOptionsPopup = () => {
  showOptions.value = false;
};

// 选择选项
const selectOption = (index) => {
  selectedOptionIndex.value = index;
};

// 确认选项
const confirmOption = () => {
  if (selectedOptionIndex.value >= 0) {
    closeOptionsPopup();
  } else {
    uni.showToast({
      title: '请选择服务规格',
      icon: 'none'
    });
  }
};

// 选择时间
const onTimeSelect = (time) => {
  selectedTime.value = time;
};

// 底部操作栏点击事件处理
const handleFooterAction = (action) => {
  switch (action) {
    case 'home':
      emit('go-to-home');
      break;
    case 'provider':
      emit('go-to-provider');
      break;
    case 'contact':
      emit('contact-service');
      break;
    default:
      break;
  }
};

// 立即购买
const buyNow = () => {
  if (!selectedOption.value) {
    uni.showToast({
      title: '请选择服务规格',
      icon: 'none'
    });
    return;
  }
  
  if (!selectedTime.value) {
    uni.showToast({
      title: '请选择服务时间',
      icon: 'none'
    });
    return;
  }
  
  emit('buy-now', {
    serviceId: props.serviceDetail.id,
    optionId: selectedOption.value.id,
    time: selectedTime.value
  });
};

// 跳转到评价页面
const goToReviews = () => {
  emit('go-to-reviews');
};
</script>

<style lang="scss" scoped>
.service-detail-container {
  position: relative;
  background-color: #f8f8f8;
  min-height: 100vh;
  
  &__options-panel {
    background-color: #fff;
    padding: 0 20px;
    margin-bottom: 12px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  &__option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #f5f5f5;
  }
  
  &__option-item:last-child {
    border-bottom: none;
  }
  
  &__option-left {
    display: flex;
    align-items: center;
  }
  
  &__option-label {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    margin-right: 20px;
    min-width: 40px;
  }
  
  &__option-value {
    font-size: 15px;
    color: #333;
  }
  
  &__option-placeholder {
    color: #999;
  }
  
  &__option-right {
    display: flex;
    align-items: center;
  }
  
  &__option-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  &__option-arrow {
    font-size: 20px;
    color: #999;
    font-weight: 300;
  }
}

/* 服务面板通用样式 */
.service-section {
  background-color: #fff;
  margin-bottom: 12px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.service-section-title {
  margin-bottom: 15px;
  position: relative;
}

.service-section-title-text {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  position: relative;
  display: inline-block;
  padding-left: 12px;
}

.service-section-title-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background-color: #07c160;
  border-radius: 2px;
}
</style>
